<!DOCTYPE html>
<html lang="en">
  <head>
    <!--
    Shows how to customize AutoSizeTextarea styling.
    -->

    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>Custom AutoSizeTextarea</title>

    <link rel="stylesheet" href="../demos.css" />

    <script type="module">
      import { template } from "../../src/base/internal.js";
      import {
        createElement,
        replace,
        transmute,
      } from "../../src/core/template.js";
      import AutoSizeTextarea from "../../src/base/AutoSizeTextarea.js";
      import { templateFrom } from "../../src/core/htmlLiterals.js";

      class CustomAutoSizeTextarea extends AutoSizeTextarea {
        get [template]() {
          const result = super[template];
          result.content.append(
            templateFrom.html`
              <style>
                [part~="textarea"] {
                  border: none;
                  border-bottom: 1px solid #757575;
                }
              </style>
            `.content
          );
          return result;
        }
      }

      customElements.define("custom-autosize-textarea", CustomAutoSizeTextarea);
    </script>
  </head>

  <body>
    <custom-autosize-textarea
      aria-label="Sample auto-sizing textarea"
      minimum-rows="2"
      placeholder="Type all you want here!"
    >
    </custom-autosize-textarea>
  </body>
</html>
